import React,{Component} from 'react';
import {connect} from 'react-redux';
import {setSelectedKey} from "../../actions";
import ContainerItem from '../../components/ContainerItem/ContainerItem';
import Sku from '../../components/Sku/Sku';
import UploadImg from '../../components/UploadImg/UploadImg';
import {Form, Input, Select,Row,Col,Radio} from 'antd';
import './GoodsAdd.css';

const FormItem=Form.Item;
const SelectOption=Select.Option;
const RadioGroup=Radio.Group;

class GoodsAdd extends Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render() {
        const formItemLayout = {
            labelCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:5},
                lg:{span:4}
            },
            wrapperCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:19},
                lg:{span:10}
            },
        };
        const formItemTableLayout = {
            labelCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:5},
                lg:{span:4}
            },
            wrapperCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:19},
                lg:{span:19}
            },
        };
        const options=[
            {
                label:'首饰',
                value:'1'
            },
            {
                label:'衣物',
                value:'2'
            }
        ];
        const {getFieldDecorator}=this.props.form;
        return(
            <div>
                <Form>
                <ContainerItem title={'基本信息'}>
                    <FormItem {...formItemTableLayout} label={'多规格列表'}>
                        {
                            getFieldDecorator('goodsSkuTable')(
                                <Sku></Sku>
                            )
                        }
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品名称'}>
                    {
                        getFieldDecorator('goodsName',{
                            rules:[{required:true,message:'请输入商品名称'}]
                        })(
                            <Input placeholder='请输入商品名称'/>
                        )
                    }
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品分类'}>
                        <Row gutter={16}>
                            <Col xs={24} sm={12} md={14} lg={18}>
                        {
                            getFieldDecorator('goodsType',{
                                rules:[{required:true,message:'请选择商品分类'}]
                            })(
                                <Select placeholder={'请选择商品分类'}>
                                    {
                                        options.map((option,index)=>{
                                            return(
                                                <SelectOption key={index} value={option.value}>{option.label}</SelectOption>
                                            )
                                        })
                                    }
                                </Select>
                            )
                        }
                            </Col>
                            <Col  xs={24} sm={12} md={10} lg={6}>
                                <span className={'goToAdd'}>去添加</span>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品图片'}>
                        {
                            getFieldDecorator('goodsImg',{
                                rules:[{required:true,message:''}]
                            })(
                                <UploadImg></UploadImg>
                            )
                        }
                        <div className={'attention'}>尺寸750*750像素以上，大小2M以下（可拖拽图片调整显示顺序）</div>
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品卖点'}>
                        {
                            getFieldDecorator('goodsMerit')(
                                <Input placeholder='请输入商品卖点'/>
                            )
                        }
                        <div className={'attention'}>选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过</div>
                    </FormItem>
                </ContainerItem>
                <ContainerItem title={'规格/库存'}>
                    <FormItem {...formItemLayout} label={'商品规格'}>
                        {
                            getFieldDecorator('goodsSku',{
                                rules:[{required:true,message:'请选择商品规格'}]
                            })(
                                <Radio.Group>
                                    <Radio value={1}>单规格</Radio>
                                    <Radio value={2}>多规格</Radio>
                                </Radio.Group>
                            )
                        }
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品名称'}>
                        {
                            getFieldDecorator('goodsName',{
                                rules:[{required:true,message:'请输入商品名称'}]
                            })(
                                <Input placeholder='请输入商品名称'/>
                            )
                        }
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品分类'}>
                        <Row gutter={16}>
                            <Col span={12}>
                                {
                                    getFieldDecorator('goodsType',{
                                        rules:[{required:true,message:'请选择商品分类'}]
                                    })(
                                        <Select placeholder={'请选择商品分类'}>
                                            {
                                                options.map((option,index)=>{
                                                    return(
                                                        <SelectOption key={index} value={option.value}>{option.label}</SelectOption>
                                                    )
                                                })
                                            }
                                        </Select>
                                    )
                                }
                            </Col>
                            <Col span={12}>
                                <span>去添加</span>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem {...formItemLayout} label={'商品卖点'}>
                        {
                            getFieldDecorator('goodsMerit')(
                                <Input placeholder='请输入商品卖点'/>
                            )
                        }
                    </FormItem>
                    <FormItem {...formItemLayout} label={'库存计算方式'}>
                        {
                            getFieldDecorator('goodsStore',{
                                rules:[{required:true,message:'请选择库存计算方式'}]
                            })(
                                <Radio.Group>
                                    <Radio value={1}>下单减库存</Radio>
                                    <Radio value={2}>付款减库存</Radio>
                                </Radio.Group>
                            )
                        }
                    </FormItem>
                </ContainerItem>
                <ContainerItem title={'商品详情'}>

                </ContainerItem>
                <ContainerItem title={'其他设置'}>

                </ContainerItem>
                <ContainerItem title={'积分设置'}>

                </ContainerItem>
                <ContainerItem title={'会员折扣设置'}>

                </ContainerItem>
                <ContainerItem title={'分销设置'}>

                </ContainerItem>
                </Form>
            </div>
        )
    }

    componentDidMount() {
        this.props.setSelectedKey('/index/goodsList');
    }
}

const mapStateToProps=state=>{
    return{
        selectedKey:state.setSelectedKey
    }
};

const mapDispatchToProps=dispatch=>{
    return{
        setSelectedKey:selectedKey=>{
            dispatch(setSelectedKey(selectedKey));
        }
    }
};

export default connect(mapStateToProps,mapDispatchToProps)(Form.create()(GoodsAdd));
